<template>
    <div class="page">
        <!-- 头部导航 -->
        <div class="nav-header">
            <van-icon name="arrow-left" size="34" @click="goBack" />
            <div class="title">我的账号</div>
            <div class="right-icon" @click="goToMessageCenter">
                <van-icon name="chat-o" size="30" />
            </div>
        </div>

        <!-- 个人信息卡片 -->
        <div class="account-card">
            <div class="user-avatar">
                <img :src="userAvatar" alt="用户头像">
            </div>
            <div class="user-info">
                <div class="user-name">{{ displayName }}</div>
                <div class="user-status" @click="goToVerification">
                    <template v-if="isVerified">已实名: {{ userRealName }}</template>
                    <template v-else>完善实名信息</template>
                </div>
            </div>
        </div>

        <!-- 账号设置项 -->
        <div class="setting-list">
            <div class="setting-item" @click="goToProfile">
                <span class="item-title">个人资料</span>
                <van-icon name="arrow" size="30" />
            </div>
            <div class="setting-item" @click="goToVerification">
                <span class="item-title">实名认证</span>
                <div v-if="isVerified" class="item-value">
                    <span>{{ userRealName }}</span>
                    <van-icon name="arrow" size="30" />
                </div>
                <van-icon v-else name="arrow" size="30" />
            </div>
            <div class="setting-item" @click="goToChangePassword">
                <span class="item-title">账号密码</span>
                <div class="item-value">
                    <span>{{ hasPassword ? '已设置' : '未设置' }}</span>
                    <van-icon name="arrow" size="30" />
                </div>
            </div>
            <div class="setting-item" @click="goToBindPhone">
                <span class="item-title">绑定手机</span>
                <div class="item-value">
                    <span>{{ displayPhone }}</span>
                    <van-icon name="arrow" size="30" />
                </div>
            </div>
            <div class="setting-item">
                <span class="item-title">隐私设置</span>
                <van-icon name="arrow" size="30" />
            </div>
        </div>

        <!-- 账号安全 -->
        <div class="setting-list">
            <div class="list-title">账号安全</div>
            <div class="setting-item">
                <span class="item-title">设备管理</span>
                <van-icon name="arrow" size="30" />
            </div>
            <div class="setting-item">
                <span class="item-title">第三方绑定</span>
                <van-icon name="arrow" size="30" />
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="bottom-action">
            <van-button type="default" block class="logout-btn">退出当前账号</van-button>
        </div>
    </div>
</template>

<script>
import { Icon, Button } from 'vant';
import defaultAvatar from '../../assets/images/meituan.png';

export default {
    name: 'AccountPage',
    components: {
        [Icon.name]: Icon,
        [Button.name]: Button
    },
    data() {
        return {
            userRealName: '',
            isVerified: false,
            userPhone: '',
            userNickname: '',
            userAvatar: defaultAvatar,
            hasPassword: false
        };
    },
    computed: {
        displayPhone() {
            if (!this.userPhone) return '暂未绑定';
            if (this.userPhone.length !== 11) return this.userPhone;
            return this.userPhone.substring(0, 3) + '****' + this.userPhone.substring(7);
        },
        displayName() {
            return this.userNickname || 'rlM793425663';
        }
    },
    created() {
        // 检查是否已实名认证
        this.checkVerificationStatus();
        // 获取绑定的手机号
        this.userPhone = localStorage.getItem('userPhone') || '';
        // 获取用户昵称
        this.userNickname = localStorage.getItem('userNickname') || '';
        // 获取用户头像
        const savedAvatar = localStorage.getItem('userAvatar');
        if (savedAvatar) {
            this.userAvatar = savedAvatar;
        }
        // 检查是否设置了密码
        this.hasPassword = localStorage.getItem('userPassword') ? true : false;
    },
    methods: {
        checkVerificationStatus() {
            // 从本地存储获取实名认证状态
            const verified = localStorage.getItem('userVerified') === 'true';
            const realName = localStorage.getItem('userRealName');
            
            this.isVerified = verified;
            this.userRealName = realName || '';
        },
        goBack() {
            this.$router.go(-1);
        },
        goToVerification() {
            this.$router.push('/verification');
        },
        goToBindPhone() {
            this.$router.push('/bindphone');
        },
        goToProfile() {
            this.$router.push('/profile');
        },
        goToChangePassword() {
            this.$router.push('/changepassword');
        },
        goToMessageCenter() {
            console.log('消息icon被点击');
            this.$router.push('/message');
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    width: 750px;
    margin: 0 auto;
    background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 100px;
    font-family: "正楷";
}

.nav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .title {
        font-size: 36px;
        font-weight: 500;
    }
    .right-icon {
        cursor: pointer;
        display: flex;
        align-items: center;
    }
}

.account-card {
    margin-top: 108px;
    background-color: #fff;
    padding: 40px 32px;
    display: flex;
    align-items: center;

    .user-avatar {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        overflow: hidden;
        
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .user-info {
        margin-left: 32px;

        .user-name {
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 16px;
        }

        .user-status {
            font-size: 28px;
            color: #999;
            cursor: pointer;
        }
    }
}

.setting-list {
    margin-top: 24px;
    background-color: #fff;
    padding: 0 32px;

    .list-title {
        font-size: 32px;
        font-weight: 500;
        padding: 32px 0 16px;
        border-bottom: 1px solid #f5f5f5;
    }

    .setting-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32px 0;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .item-title {
            font-size: 30px;
            color: #333;
        }

        .item-value {
            display: flex;
            align-items: center;
            color: #999;
            font-size: 28px;

            .van-icon {
                margin-left: 16px;
            }
        }

        .van-icon {
            color: #999;
        }
    }
}

.bottom-action {
    margin: 60px 32px;

    .logout-btn {
        height: 88px;
        font-size: 32px;
        border-radius: 44px;
        color: #ff5f5f;
        border-color: #ff5f5f;
    }
}
</style> 